<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script><!--axios-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--vue插件-->
</head>
<body>
<div class="wrap login_wrap" id="register">
    <div class="content">

        <div class="logo"></div>

        <div class="login_box">

            <div class="login_form">
                <div class="login_title">
                    注册
                </div>
                <form action="#" method="post">

                    <div class="form_text_ipt">
                        <input name="username" v-model="users.email" type="text" placeholder="邮箱">
                    </div>
                    <div class="form_text_ipt">
                        <input name="username" v-model="users.name" type="text" placeholder="姓名">
                    </div>
                    <div class="form_text_ipt">
                        <input name="password" v-model="users.password" type="password" placeholder="密码">
                    </div>
                    <div class="form_text_ipt">
                        <input name="code" type="text" v-model="code" placeholder="验证码">
                    </div>
                    <div class="form_btn">
                        <button type="button" @click="GetVerificationCode">获取验证码</button>
                    </div>
                    <div class="form_btn">
                        <button type="button" @click="register">注册</button>
                    </div>
                    <div class="form_reg_btn">
                        <span>已有帐号？</span><a href="login.html">马上登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div style="text-align:center;">

</div>
<script>
    new Vue({
        el: "#register",
        data: {
            users: {},
            code: ""
        },
        methods: {
            GetVerificationCode: function () {
                //通过qq邮箱发送验证码
                var that = this
                axios.post("/api/v1/user/sendVCode?email=" + that.users.email).then(function (res) {
                    if (res.data.code) {
                        alert("验证码发送成功请注意接受")
                    } else {
                        alert("短信发送失败 请核验邮箱号")
                    }
                })

            },
            register: function () {
                var that = this
                axios.post("/api/v1/user/register?vcode=" + that.code, that.users).then(function (res) {
                    if (res.data.code) {
                        alert(res.data.extend.success)
                    } else {
                        alert(res.data.extend.err)
                    }
                })

            }
        }
    })
</script>
</body>
</html>
